import React, {Component} from 'react';
import './App.css';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';
import Badge from 'material-ui/Badge';
import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
import Avatar from 'material-ui/Avatar';
import FileFolder from 'material-ui/svg-icons/file/folder';
import FontIcon from 'material-ui/FontIcon';
import List from 'material-ui/List/List';
import ListItem from 'material-ui/List/ListItem';
import AppBar from 'material-ui/AppBar';
import AutoComplete from 'material-ui/AutoComplete';

import {
    blue300,
    indigo900,
    orange200,
    deepOrange300,
    pink400,
    purple500,
} from 'material-ui/styles/colors';

const style = { margin: 5 };

class App extends Component {
    state = {
        dataSource: [],
    };
    handleUpdateInput = (value) => {
        this.setState({
            dataSource: [
                value,
                value + value,
                value + value + value,
            ],
        });
    };
    render() {
        return (
            <div className="App">
                <MuiThemeProvider>
                    <AppBar
                        title="First react"
                        iconClassNameRight="muidocs-icon-navigation-expand-more"
                    />
                    <MyAwesomeReactComponent />
                    <AutoComplete
                        hintText="Type anything"
                        dataSource={this.state.dataSource}
                        onUpdateInput={this.handleUpdateInput}
                    />
                    <AutoComplete
                        hintText="Type anything"
                        dataSource={this.state.dataSource}
                        onUpdateInput={this.handleUpdateInput}
                        floatingLabelText="Full width"
                        fullWidth={true}
                    />
                    <Badge
                        badgeContent={4}
                        primary={true}
                    >
                        <NotificationsIcon />
                    </Badge>
                    <List>
                        <ListItem
                            disabled={true}
                            leftAvatar={
                                <Avatar src="images/uxceo-128.jpg" />
                            }
                        >
                            Image Avatar
                        </ListItem>
                        <ListItem
                            disabled={true}
                            leftAvatar={
                                <Avatar
                                    src="images/uxceo-128.jpg"
                                    size={30}
                                    style={style}
                                />
                            }
                        >
                            Image Avatar with custom size
                        </ListItem>
                        <ListItem
                            disabled={true}
                            leftAvatar={
                                <Avatar icon={<FontIcon className="muidocs-icon-communication-voicemail" />} />
                            }
                        >
                            FontIcon Avatar
                        </ListItem>
                        <ListItem
                            disabled={true}
                            leftAvatar={
                                <Avatar
                                    icon={<FontIcon className="muidocs-icon-communication-voicemail" />}
                                    color={blue300}
                                    backgroundColor={indigo900}
                                    size={30}
                                    style={style}
                                />
                            }
                        >
                            FontIcon Avatar with custom colors and size
                        </ListItem>
                        <ListItem
                            disabled={true}
                            leftAvatar={
                                <Avatar icon={<FileFolder />} />
                            }
                        >
                            SvgIcon Avatar
                        </ListItem>
                        <ListItem
                            disabled={true}
                            leftAvatar={
                                <Avatar
                                    icon={<FileFolder />}
                                    color={orange200}
                                    backgroundColor={pink400}
                                    size={30}
                                    style={style}
                                />
                            }
                        >
                            SvgIcon Avatar with custom colors and size
                        </ListItem>
                        <ListItem
                            disabled={true}
                            leftAvatar={<Avatar>A</Avatar>}
                        >
                            Letter Avatar
                        </ListItem>
                        <ListItem
                            disabled={true}
                            leftAvatar={
                                <Avatar
                                    color={deepOrange300}
                                    backgroundColor={purple500}
                                    size={30}
                                    style={style}
                                >
                                    A
                                </Avatar>
                            }
                        >
                            Letter Avatar with custom colors and size
                        </ListItem>
                    </List>
                </MuiThemeProvider>
            </div>
        );
    }
}

export default App;
